<template>
  <div id="topTagList">
    <div class="left-tabs">
      <el-tabs
        v-model="editableTabsValue"
        type="card"
        @tab-remove="removeTab"
        @tab-click="handleClick"
      >
        <el-tab-pane
          v-for="item in editableTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name"
          :closable="item.name === 'main' ? false : true"
        >
          <!-- {{item.content}}-->
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dropdown trigger="click" class="right-btn">
      <el-button size="small" type="success" plain>
        页签操作<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="delAllTag">
          关闭所有
        </el-dropdown-item>
        <el-dropdown-item @click.native="delOtherTag">
          关闭其他
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  name: 'TopTagList',
  msg: '右侧内容区域-顶部标签列表',
  data() {
    return {
      editableTabsValue: 'wh:system:index',
      tabIndex: 1,
      homeTab: [],
      editableTabs: []
    }
  },
  computed: {
    removeLog() {
      return this.$store.state.removeLog
    }
  },
  watch: {
    $route(newVal, oldVal) {
      /* console.log(newVal); */
      this.checkBtnList(newVal)
    },
    removeLog(newVal, oldVal) {
      if (newVal) {
        this.removeTab(newVal)
        this.$store.commit('setRemoveLog', '')
      }
    }
  },
  mounted() {
    this.inPage()
  },
  methods: {
    inPage() {
      this.getTabList().next()
    },
    getTabList: function*() {
      this.editableTabs = JSON.parse(sessionStorage.getItem('editableTabs'))
      if (!this.editableTabs || this.editableTabs.length === 0) {
        this.saveTabList(this.homeTab)
        this.editableTabs = [...this.homeTab]
      }
      if (this.editableTabs && this.editableTabs.length > 0) {
        for (let item of this.editableTabs) {
          /*console.log('item.cachedName=' + item.cachedName)*/
          // 取：最后一个值作为缓存name
          //设置需缓存页面的name
          this.$store.commit('setCachedViews', {
            type: 'add',
            name: item.cachedName.split(':')[
              item.cachedName.split(':').length - 1
            ]
          })
        }
      }
      yield this.checkBtnList(this.$route)
    },
    /* 点击标签 */
    handleClick(tab, event) {
      let query = null
      let path = null
      let tabIndex = this.editableTabs.findIndex(
        (item) => item.name === tab.name
      )
      if (tabIndex >= 0) {
        query = this.editableTabs[tabIndex].query
        path = this.editableTabs[tabIndex].path
      }
      this.changePage(path, query)
    },
    /* 跳转页面 */
    changePage(path, query) {
      this.$router.push({ path, query })
    },
    /* 检查是否有该标签，有-高亮 && 更新query，无-新增 */
    checkBtnList(r) {
      if (!r.name) {
        return
      }
      let name = r.params.id ? r.name + r.params.id : r.name
      let tabIndex = this.editableTabs.findIndex((item) => item.path === r.path)
      if (tabIndex >= 0) {
        this.editableTabsValue = name
        let curQuery = JSON.stringify(this.editableTabs[tabIndex].query)
        let routeQuery = JSON.stringify(r.query)
        if (curQuery != routeQuery) {
          this.editableTabs[tabIndex].query = r.query
          this.saveTabList(this.editableTabs)
        }
      } else {
        let obj = {
          title: r.meta.title,
          name: name,
          path: r.path,
          query: r.query,
          cachedName: r.name
        }
        this.addTab(obj)

        if (!r.params.id && r.name !== 'main') {
          //设置需缓存页面的name
          this.$store.commit('setCachedViews', {
            type: 'add',
            name: r.name.split(':')[r.name.split(':').length - 1]
          })
        }
      }
    },
    /* 新增标签 */
    addTab(obj) {
      this.editableTabs.push(obj)
      this.saveTabList(this.editableTabs)
      this.editableTabsValue = obj.name
    },
    /* 删除标签 */
    removeTab(targetName) {
      /* console.log('targetName=' + targetName)*/
      let tabs = [...this.editableTabs]
      let activeName = this.editableTabsValue
      let query = ''
      let path = ''
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              activeName = nextTab.name
              query = nextTab.query
              path = nextTab.path
            }
          }
        })
      }
      this.editableTabsValue = activeName
      this.changePage(path, query)
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName)
      this.saveTabList(this.editableTabs)
      //设置需缓存页面的name
      let delItem = tabs.find((item) => item.name === targetName)
      this.$store.commit('setCachedViews', {
        type: 'del',
        name: delItem.cachedName.split(':')[
          delItem.cachedName.split(':').length - 1
        ]
      })
    },
    /* 本地存储 */
    saveTabList(obj) {
      sessionStorage.setItem('editableTabs', JSON.stringify(obj))
    },
    /* 删除全部标签 */
    delAllTag() {
      this.editableTabs = [...this.homeTab]
      this.editableTabsValue = 'main'
      this.changePage('/main')
      this.saveTabList(this.editableTabs)
      //设置需缓存页面的name
      this.$store.commit('setCachedViews', {
        type: 'delAll'
      })
    },
    delOtherTag() {
      let r = this.$route
      let name = r.params.id ? r.name + r.params.id : r.name
      this.editableTabs = this.editableTabs.filter(
        (item) => item.name === name || item.name === 'main'
      )
      this.saveTabList(this.editableTabs)
      this.$store.commit('setCachedViews', {
        type: 'delOther',
        name: name
      })
    }
  }
}
</script>

<style lang="less">
#topTagList {
  @rightBtnWidth: 150px;
  @h: 30px;
  position: relative;
  height: @h;
  overflow: hidden;
  padding-left: 10px;
  .left-tabs {
    float: left;
    width: calc(~'100% - 110px');
  }

  .right-btn {
    float: right;
    margin-right: 13px;
    cursor: pointer;
    .el-button {
      padding: 7px 15px;
    }
  }

  .el-tabs--card > .el-tabs__header {
    border-bottom: 0;

    .el-tabs__nav {
      border: 0;
    }

    .el-tabs__nav-next,
    .el-tabs__nav-prev {
      line-height: 30px;
    }

    .el-tabs__item {
      background: #fff;
      color: #0d1636;
      position: relative;
      border-radius: 2px;
      border-left: 0;
      margin-right: 4px;
      padding-left: 30px;
      height: 30px;
      line-height: 30px;

      &:before {
        content: '';
        position: absolute;
        left: 10px;
        top: 50%;
        margin-top: -6px;
        width: 12px;
        height: 12px;
        background: #f3f4f7;
        border-radius: 50%;
      }

      &.is-active {
        &:before {
          background: #00d7aa;
        }
      }
    }
  }
}
</style>
